<template>
	<custom-nav-bar title="分类"></custom-nav-bar>
	<view class="classLayout pageBg">
		<view class="classify" v-for="item in themeImages">
			<theme-item :themeImage="item"></theme-item>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const themeImages = ref([{
			id: "1",
			picsrc: "https://pica.zhimg.com/v2-e4e60a926de9293e9ec38b1eabb593b2_r.jpg?source=1940ef5c",
			mask: "绝美风景",
			tab: "热门壁纸"
		},
		{
			id: "2",
			picsrc: "https://pic2.zhimg.com/v2-bb704875f41303cf4cef9d7eb418803d_r.jpg?source=1940ef5c",
			mask: "动漫壁纸",
			tab: "热门壁纸"
		},
		{
			id: "3",
			picsrc: "https://pic4.zhimg.com/v2-22a434b5f322051ee0f838aa9b25b939_r.jpg?source=1940ef5c",
			mask: "动漫壁纸",
			tab: "热门壁纸"
		},
		{
			id: "4",
			picsrc: "https://pic4.zhimg.com/v2-018795ae154cf339fefab9fcdb7fdc7a_r.jpg?source=1940ef5c",
			mask: "动漫人物",
			tab: "推荐"
		},
		{
			id: "5",
			picsrc: "https://pic3.zhimg.com/v2-5188eb36ca4e080f80de0a75669e7de8_r.jpg",
			mask: "绝美风景",
			tab: "推荐"
		},
		{
			id: "6",
			picsrc: "https://pic4.zhimg.com/v2-f77e75995c247c301c564ad74e812fd5_r.jpg?source=1940ef5c",
			mask: "科技畅想",
			tab: "推荐"
		},
		{
			id: "7",
			picsrc: "https://pic1.zhimg.com/v2-b417dd08616723ef1ad531f5fd8e1d4f_r.jpg?source=1940ef5c",
			mask: "绝美风景",
			tab: "top10"
		},
		{
			id: "8",
			picsrc: "https://pic1.zhimg.com/v2-474122ad1e2fa1e421df21c485453f20_r.jpg?source=1940ef5c",
			mask: "绝美风景",
			tab: "热门壁纸"
		},
		{
			id: "9",
			picsrc: "https://pic2.zhimg.com/v2-60c254dd8ebe57779d3ba359ff1fc321_r.jpg?source=1940ef5c",
			mask: "绝美风景",
			tab: "top10"
		},
		{
			id: "10",
			picsrc: "https://pic3.zhimg.com/v2-acab3db0d1c2ac58b7aa93196cd42aee_r.jpg?source=1940ef5c",
			mask: "绝美风景",
			tab: "热门壁纸"
		},
		{
			id: "11",
			picsrc: "https://ts1.tc.mm.bing.net/th/id/R-C.afa7f11927364dd996df56713fb38b41?rik=zLqS2Y21jcFqwA&riu=http%3a%2f%2fdesk.fd.zol-img.com.cn%2ft_s960x600c5%2fg5%2fM00%2f07%2f0E%2fChMkJ1Y5qNeIGuXYAANaur1D4nYAAEfFQMuNzcAA1rS982.jpg&ehk=xHeq4JpJNH2PjAda4vXCHb5b6nZT7baqBaG4iUgxQoM%3d&risl=&pid=ImgRaw&r=0",
			mask: "绝美风景",
			tab: "热门壁纸"
		},
		{
			id: "12",
			picsrc: "https://ss0.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2671878049,2123263829&fm=253&gp=0.jpg",
			mask: "绝美风景",
			tab: "热门壁纸"
		}
	])
</script>

<style lang="scss" scoped>
	.classLayout {
		padding: 30rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15rpx;

	}
</style>